.section-bottom {
  width: 70%;
  margin: 100px auto;
  .swiper-container {
    width: 100%;
    // vw是一个视口单位(视口即可视区)
    height: 34vw;
    background-color: pink;
    border-radius: 35px;
    // 轮播项
    .swiper-slide {
      position: relative;
      img {
        position: absolute;
      }
      &:nth-of-type(1) {
        background: #ffdbc6;
        img {
          &:nth-of-type(1) {
            width: 36%;
            left: 15%;
            bottom: -40%;
            z-index: 1;
          }
          &:nth-of-type(2) {
            width: 36%;
            left: 30%;
            bottom: -60%;
          }
        }
      }
      &:nth-of-type(2) {
        background: #ace3e5;
        img {
          &:nth-of-type(1) {
            width: 48%;
            left: 40%;
            bottom: 40%;
          }
          &:nth-of-type(2) {
            width: 48%;
            left: 25%;
            top: 40%;
          }
        }
      }
      &:nth-of-type(3) {
        background: #e0daf5;
        img {
          &:nth-of-type(1) {
            width: 34%;
            left: 30%;
            bottom: -40%;
          }
          &:nth-of-type(2) {
            width: 38%;
            left: 41%;
            bottom: -30%;
          }
        }
      }
      &:nth-of-type(4) {
        background: #dbdbdb;
        img {
          &:nth-of-type(1) {
            width: 25%;
            left: 27%;
            bottom: -30%;
          }
          &:nth-of-type(2) {
            width: 25%;
            left: 45%;
            bottom: -30%;
          }
        }
      }
    }
    // 分页器
    .swiper-pagination {
      position: absolute;
      width: auto;
      left: auto;
      bottom: 10%;
      right: 10%;
      .my-bullet {
        display: inline-block;
        width: 1.3vw;
        height: 1.3vw;
        border-radius: 50%;
        background: #000;
        margin: 0 5px;
        &:nth-child(1) {
          color: #ff6b29;
          background: #ff6b29;
        }
        &:nth-child(2) {
          color: #16c196;
          background: #16c196;
        }
        &:nth-child(3) {
          color: #9676ff;
          background: #9676ff;
        }
        &:nth-child(4) {
          color: #434040;
          background: #434040;
        }
      }
      .my-bullet-active {
        border: 3px solid #fff;
        box-sizing: border-box;
        box-shadow: 0 0 10px;
      }
    }
    // 白线
    .swiper-line {
      width: 4vw;
      height: 3px;
      background-color: #ffffff;
      position: absolute;
      left: 5%;
      top: 10%;
      z-index: 66;
    }
    // 滚动的字体
    .swiper-name, .swiper-num {
      font-size: 40px;
      height: 45px;
      line-height: 45px;
      overflow: hidden;
      color: #fff;
      position: absolute;
      left: 5%;
      top: 15%;
      z-index: 666;
      span {
        display: block;
        position: relative;
        top: 0px;
      }
    }
    .swiper-num {
      left: auto;
      top: 5%;
      right: 5%;
    }
  }
}
@keyframes mySlideInUp {
  0% {
    transform: translateY(20%);
    visibility: visible;
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.mySlideInUp {
  animation-name: mySlideInUp;
}
@keyframes mySlideInDown {
  0% {
    transform: translateY(-20%);
    visibility: visible;
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.mySlideInDown {
  animation-name: mySlideInDown;
}
